<template>
  <div class="error-wrapper">
    <component :is="errorComponent" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import Error404 from './404.vue'
import Error403 from './403.vue'
import Error500 from './500.vue'
import NetworkError from './network.vue'
import MaintenanceError from './maintenance.vue'

const route = useRoute()

const errorComponents = {
  '404': Error404,
  '403': Error403,
  '500': Error500,
  'network': NetworkError,
  'maintenance': MaintenanceError
}

const errorComponent = computed(() => {
  const errorType = route.params.type || route.query.type || '404'
  return errorComponents[errorType] || Error404
})
</script>

<style scoped>
.error-wrapper {
  width: 100%;
  height: 100vh;
}
</style> 